<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>多边形测量</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        // position: [120.170646, 30.28362, 1000], //相机的位置
        // lookAt: [120.170646, 30.28362, 0], //相机看向的地图位置
        position: [122.01694702591361, 40.76308926482676, 100000],
        lookAt: [122.01694702591361, 40.76308926482676, 0],

        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });

    var lineData = {
            color: '#00FA9A',
            lineWidth: 2,  //线的宽度
    };
    let img = 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/images/img_logo.39362dc1.png';
    var polygonData = {
            // textureImg: img, //贴在多边形上的图片
            alphaValue: 1,  //透明值
            color: '#FF1493', //多边形的颜色
            transparent: true,
            depthTest: false
        };
    var editPolygon = new GE.EitdPolygon();

    btn();
    function btn() {
        let button0 = new GE.Button('编辑多边形', function () { //Math.random()
            editPolygon.openEdit(lineData, polygonData, clickListener, rightClickListener);
        });
        app.ui.add(button0);

        let button1 = new GE.Button('关闭多边形', function () {
            editPolygon.closeEdit();
        });
        app.ui.add(button1);
    }

    function clickListener(point){
        console.log(point);
    }

    function rightClickListener(point, pointArray, polygon){
        console.log(point);
        console.log(pointArray);

        let polygonMeasure = new GE.PolygonMeasureAnalysis(polygon);
        let area = polygonMeasure.calculateArea();
        console.log('面积:' + area + '平方米');

        let perimeter = polygonMeasure.calculatePerimeter();
        console.log('周长' + perimeter + '米');

        alert('面积:' + area + '平方米' + ', 周长' + perimeter + '米');
    }

    var threeTileModel;
    // tiles3d();
    function tiles3d() {
        threeTileModel = new GE.Tiles3d({
            url: 'http://36.212.170.187:9000/PrimadOriginCompressorDDS3DTiles/L0_0/tileset.json', refinement: 400, loadRange: 0,  //new update
            z: 10, //调整数据的高度
            minSize: 1000,
            maxSize: 6000,
            // minSize: 0,
            // maxSize: 2000,
            isOpenAdditionalCamera: true, //是否添加预加载的额外相机
            additionCameraFov: 30, //15, //额外相机的fov
            maxJobs: 60, //优先级队列中每次执行下载解析任务的最大数量。因为这个数据很细碎，下载任务很重，所以这个值可以设置的稍大一些
            isSupportTransparent: false,
            isDoubleSide: false,
            geoSystem: '4978', //4978是椭球坐标系，3857是web墨卡托坐标系。这个参数可以不配置，默认是4978
            canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
        });
        app.add(threeTileModel);
        // window.tiles3d = threeTileModel;
    }
    tiles3d();
</script>

</html>